<!-- 左上角用户小窗组件 -->
<template>
  <view>
    <div class="user">
      <div class="ubackground">
        <button class="user-icon" @click="goTopersonal()" plain="true">
          <image :src="user.face" mode="aspectFill"
            style="height: 70px; width: 70px; border: none; border-radius: 100%;"></image>
        </button>
      </div>
    </div>
  </view>
</template>

<script>
  export default {
    name: "userAvatarBar",
    data() {
      return {
        //左上角个人
        user: {
          username: "",
          face: ""
        },
      };
    },
    mounted() {
			if(wx.getStorageSync('nickName')){
					this.user.username = wx.getStorageSync('nickName');
					this.user.face = wx.getStorageSync('avatarUrl');
			} else {
					this.user.username = '欢迎使用轻羽飞扬';
					this.user.face = '/static/head.png';
			}
    },
    methods: {
      goTopersonal() {
        uni.switchTab({
          url: '/pages/main/user'
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .user {
    position: absolute;
    left: 0;
    display: flex;
    flex-direction: row;

    .ubackground {
      background-color: #FFBF6B;
      height: 90px;
      width: 90px;
      border-radius: 0 0 95% 0;

      .user-icon {
        position: relative;
        border: none !important;
        border-color: transparent;
        right: 17%;
      }
    }
  }
</style>